<template>
	<view class="shopList">
		<view class="topBox">
			<van-search :value="searchValue" shape="round" background="#fff" placeholder="请输入搜索关键词"
				@search="getSearch" />
				<!-- <view class="sortBox" v-if="imgList.length!=0">
					<view class="cont">
						<text :class="[orderBy==''?'active':'']" @click="sort()">综合</text>
					</view>
					<view class="cont">
						<text 
						v-if="orderBy=='saleNum' && sortBy=='asc'" 
						:class="[orderBy=='saleNum' && sortBy=='asc'?'active':'']" 
						@click="sort('saleNum','desc')"
						>热度 ▲</text>							
						<text 
						v-else-if="orderBy=='saleNum'&& sortBy=='desc'" 
						:class="[orderBy=='saleNum'&& sortBy=='desc'?'active':'']" 
						@click="sort('saleNum','asc')"
						>热度 ▼</text>
						<text v-else @click="sort('saleNum','asc')">热度</text>
					</view>
					<view class="cont">
						<text 
						v-if="orderBy=='retailPrice' && sortBy=='asc'" 
						:class="[orderBy=='retailPrice' && sortBy=='asc'?'active':'']" 
						@click="sort('retailPrice','desc')"
						>价格 ▲</text>
						<text 
						v-else-if="orderBy=='retailPrice'&& sortBy=='desc'"  
						:class="[orderBy=='retailPrice'&& sortBy=='desc'?'active':'']" 
						@click="sort('retailPrice','asc')"
						>价格 ▼</text>
						<text v-else @click="sort('retailPrice','asc')">价格</text>
					</view>
				</view> -->
		</view>
		<view class="cont" style="width:100%;height: calc(100vh - 120rpx);">
			<scroll-view
			scroll-y="true"
			style="width:100%;height: 99%;"
			@scrolltolower="getGoodsList"
			> 	
				<van-empty v-show='imgList.length==0' image="search" description="没有搜到哦" />
				<view class="goodsList" v-show='imgList.length!=0'>
					<view class="box" v-for="(item,index) in imgList" :key="item" @click="to(item)">
						<image :src="item.mainImageUrl+'?imageView2/1/w/324/h/310/q/85'" mode="aspectFill"></image>
						<view class="intro">
							<text class="name">{{item.name}}</text>
							<text class="price">￥{{item.factoryPrice}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				searchValue: '',
				pageNum:1,
				orderBy:'',
				sortBy:''
			}
		},
		onLoad() {
			// this.getGoodsList()
		},
		methods: {
			sort(val='',type){
				this.orderBy=val;
				this.sortBy=type;
				if(val!=''){
					this.imgList=[];
					this.pageNum=1;
					this.getGoodsList();
				}else{
					this.getGoodsList();
				}
			},
			to(item) {
				uni.navigateTo({
					url: '/pages/detail/index?id=' + item.id
				});
			},
			getSearch(value){
				this.searchValue=value.detail
				this.getGoodsList(1)
			},
			getGoodsList(type) {
				console.log(666,type)
				if(type==1){
					this.pageNum=1;
				}
				let data={
					pageNum: this.pageNum,
					pageSize: 10,
				}
				// if(this.orderBy && this.sortBy){
				// 	data={
				// 		styleId :this.activeIndex,
				// 		pageNum: this.pageNum,
				// 		pageSize: 10,
				// 		orderBy:this.orderBy,
				// 		sortBy:this.sortBy
				// 	}
				// }else{
				// 	data={
				// 		pageNum: this.pageNum,
				// 		pageSize: 10,
				// 	}
				// }
				
				if (this.searchValue) {
					const requestParam = {
						url: "/app/mall/commodityList?commodityName="+this.searchValue,
						method: "GET",
						data:data,
						callBack: (res) => {
							if(type==1){
								this.imgList = res.rows;
							}else{
								console.log(888)
								if((res.total/10+1)>this.pageNum){
									this.imgList.push(...res.rows);
									this.pageNum++;
								}
							}
						}
					}
					this.$request(requestParam);
				}
			},
		},
	}
</script>

<style lang="scss">
	@import './style.scss';
</style>
